/**
 * 格式化创作功能使用示例
 */

import React, { useState } from 'react';
import { Card, Input, Select, Space, Typography, Divider } from 'antd';
import FormattedCreationPanel from '../components/creation/FormattedCreationPanel';

const { TextArea } = Input;
const { Option } = Select;
const { Title, Paragraph } = Typography;

const FormattedCreationExample: React.FC = () => {
  const [hotItemId] = useState('68dbb177accacf1f30e9249b'); // 华南理工案例
  const [platform] = useState('weixin');
  const [writingAngle, setWritingAngle] = useState('news_report');
  const [userPrompt, setUserPrompt] = useState('请写一篇关于这个事件的新闻报道，要求客观真实，字数800-1200字。');
  const [modelName, setModelName] = useState('gpt-3.5-turbo');
  const [generatedContent, setGeneratedContent] = useState('');

  const handleContentGenerated = (content: string, isFormatted: boolean) => {
    setGeneratedContent(content);
    console.log('内容已生成:', { content, isFormatted });
  };

  return (
    <div style={{ padding: '24px', maxWidth: '1200px', margin: '0 auto' }}>
      <Title level={2}>格式化创作功能演示</Title>
      
      <Paragraph>
        这个示例展示了如何使用格式化创作功能，AI会根据格式要求直接输出符合标准的HTML内容，
        可以直接下载为Word文档。
      </Paragraph>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px' }}>
        {/* 左侧：参数配置 */}
        <Card title="创作参数配置" size="small">
          <Space direction="vertical" style={{ width: '100%' }}>
            <div>
              <label>写作类型：</label>
              <Select
                value={writingAngle}
                onChange={setWritingAngle}
                style={{ width: '100%' }}
              >
                <Option value="news_report">新闻报道</Option>
                <Option value="analysis">分析报告</Option>
                <Option value="commentary">评论文章</Option>
                <Option value="general">通用格式</Option>
              </Select>
            </div>

            <div>
              <label>AI模型：</label>
              <Select
                value={modelName}
                onChange={setModelName}
                style={{ width: '100%' }}
              >
                <Option value="gpt-3.5-turbo">GPT-3.5 Turbo</Option>
                <Option value="gpt-4">GPT-4</Option>
                <Option value="deepseek-reasoner">DeepSeek Reasoner</Option>
                <Option value="claude-3-sonnet">Claude 3 Sonnet</Option>
              </Select>
            </div>

            <div>
              <label>创作要求：</label>
              <TextArea
                value={userPrompt}
                onChange={(e) => setUserPrompt(e.target.value)}
                rows={6}
                placeholder="请输入具体的创作要求..."
              />
            </div>

            <div style={{ fontSize: '12px', color: '#666' }}>
              <strong>当前热点：</strong>华南理工的被撞女生，集齐了所有悲伤点<br/>
              <strong>平台：</strong>{platform}<br/>
              <strong>热点ID：</strong>{hotItemId}
            </div>
          </Space>
        </Card>

        {/* 右侧：格式化创作面板 */}
        <FormattedCreationPanel
          hotItemId={hotItemId}
          platform={platform}
          writingAngle={writingAngle}
          userPrompt={userPrompt}
          modelName={modelName}
          onContentGenerated={handleContentGenerated}
        />
      </div>

      {/* 格式说明 */}
      <Divider />
      <Card title="格式标准说明" size="small">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '16px' }}>
          <div>
            <Title level={5}>一级标题</Title>
            <ul>
              <li>字体：黑体</li>
              <li>字号：三号(16pt)</li>
              <li>对齐：左对齐</li>
              <li>间距：段前段后空1行</li>
            </ul>
          </div>
          
          <div>
            <Title level={5}>二级标题</Title>
            <ul>
              <li>字体：黑体</li>
              <li>字号：四号(14pt)</li>
              <li>对齐：左对齐</li>
              <li>间距：段前段后空0.5行</li>
            </ul>
          </div>
          
          <div>
            <Title level={5}>正文</Title>
            <ul>
              <li>字体：仿宋GB-2312</li>
              <li>字号：小四号(12pt)</li>
              <li>对齐：两端对齐</li>
              <li>缩进：首行缩进两个字符</li>
            </ul>
          </div>
        </div>
      </Card>

      {/* 使用说明 */}
      <Divider />
      <Card title="使用说明" size="small">
        <Paragraph>
          <strong>1. 配置参数：</strong>选择写作类型、AI模型，输入创作要求
        </Paragraph>
        <Paragraph>
          <strong>2. 启用格式化：</strong>开启格式化开关，AI会按照标准格式输出HTML内容
        </Paragraph>
        <Paragraph>
          <strong>3. 开始创作：</strong>点击"开始创作"按钮，等待AI生成内容
        </Paragraph>
        <Paragraph>
          <strong>4. 格式验证：</strong>系统会自动验证输出格式是否符合要求
        </Paragraph>
        <Paragraph>
          <strong>5. 导出Word：</strong>点击"下载Word文档"按钮，直接获得格式化的Word文件
        </Paragraph>
      </Card>
    </div>
  );
};

export default FormattedCreationExample;
